<template>
    <div>
        订单号 <el-input v-model="orderNumber" autocomplete="off" placeholder="请输入订单号"
            style="width: 15%;"></el-input>&nbsp;

        <el-button type="primary" @click="searchEmp()" icon="el-icon-search">搜索</el-button>
        <el-button type="primary" @click="resetSearchForm('searchForm')" icon="el-icon-refresh">重置</el-button>

        <!-- 展示页面的表格 -->
        <el-table :data="orderSettlementList" v-loading="listLoading" element-loading-text="Loading" border:true fit
            highlight-current-row stripe style="width: 100%">

            <el-table-column prop="orderNumber" label="订单号" width="180">
            </el-table-column>
            <el-table-column prop="totalAmount" label="总金额" width="180">
            </el-table-column>
            <el-table-column prop="paymentAmount" label="支付金额" width="180">
            </el-table-column>
            <el-table-column prop="remark" label="备注" width="180">
            </el-table-column>
            <el-table-column prop="overTime" label="结算时间" width="180">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="180">
            </el-table-column>
            <el-table-column prop="name" label="操作人" width="180">
            </el-table-column>

            <!-- <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="orderDetail(scope.$index, scope.row)" type="info">详细信息</el-button>
                </template>
            </el-table-column> -->
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

    </div>

</template>
<script>


// 导入api/customer.js中定义接口


import { orderSettlement } from "@/api/orderSettlement";



export default {

    filters: {
        statusFilter(status) {
            const statusMap = {
                published: "success",
                draft: "gray",
                deleted: "danger",
            };
            return statusMap[status];
        },
    },
    data() {
        return {
            orderSettlementList: [],
            listLoading: true,
            dialogUpdateVisible: false,
            dialogTableVisible: false,
            dialogExcelVisible: false,
            formLabelWidth: "120px",
            currentPage: 1,
            total: 0,
            pageSize: 5,
           
            orderNumber: "",
        };
    },
    created() {
        this.fetchData();
        
    },
    methods: {
        fetchData() {
            this.listLoading = true;
            orderSettlement({
                pageNum: this.currentPage, pageSize: this.pageSize, orderNumber: this.orderNumber, employeeId: this.employeeId
            }).then((response) => {
                console.log(response)
                this.orderSettlementList = response.data.list;
                this.total = response.data.total
                this.listLoading = false;
            });
        },
        searchEmp() {
            this.fetchData();
        },
       

        //在查询后重置
        resetSearchForm() {
            this.orderNumber = "";
            this.employeeId = "";
            this.fetchData();
        },
        
        // 每页显示的记录数发生变化触发的操作
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.fetchData()
        },
        // 当前页发生变化触发的操作
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.currentPage = val
            this.fetchData(this.code, this.name)
        },
        // 生命周期钩子函数(vue对象创建完,自动调用该方法)
        created() {
            this.fetchData();
        },
    }
}

</script>